<template>
  <div>
    <div class="my-cart">
      <div class="my-cart-top">
        <span class="lab">已选商品</span>
        <span class="del" @click="$emit('clearcart')">清空</span>
      </div>
      <dl class="cart-list">
        <dd v-for="(item, index) in list" :key="index" class="item">
          <div class="imgW"><img :src="item.image_text" alt="" class="img"></div>
          <div class="div1">
            <div class="name-box"><div class="name row2">{{item.title}}</div></div>
            <span class="price">￥{{item.price}}</span>
          </div>
          <div class="div2">
            <div class="total_price">￥{{getPrice(item)}}</div>
            <div class="btn-box">
              <span class="btn btn1" @click="$emit('jian',item)">-</span>
              <input type="number" v-model="item.number" class="input">
              <span class="btn btn2" @click="$emit('add',item)">+</span>
            </div>
          </div>
        </dd>
      </dl>
    </div>
    <span class="cart-submit" @click="submit">提交</span>
  </div>
  
</template>

<script>
// 不支持 import
module.exports = {
  props:{
    list:{
      type:Array,
      default:(()=>{return []})
    }
  },
  data: function () {
    return {
      
    };
  },
  components: {},
  methods:{
    getPrice(item){
      return (Number(item.price) * item.number).toFixed(2)
    },
    submit(){
      const place_order = this.list.map(m=>{return {product_id: m.id, number: m.number}})
      const that = this;
      setOrdersApi({place_order: place_order},res=>{
        wx.config({
          debug: true, // 开启调试模式, 调试时可以看到所有信息
          appId: res.payConfig.appId, // 必填，公众号的唯一标识
          timestamp: res.payConfig.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.payConfig.nonceStr, // 必填，生成签名的随机串
          signature: res.payConfig.paySign, // 必填，签名
          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
  
        wx.ready(function() {
          wx.chooseWXPay({
            timestamp: res.payConfig.timestamp, // 支付签名时间戳
            nonceStr: res.payConfig.nonceStr, // 支付签名随机串
            package: res.payConfig.package, // 统一支付接口返回的prepay_id参数值
            signType: res.payConfig.signType, // 签名方式，默认为'SHA1'
            paySign: res.payConfig.paySign, // 支付签名
            success: function(res) {
              // 支付成功后的回调函数
              showToast('下单成功');
              that.$emit('close')
              console.log(res);
            },
            fail: function(res) {
              // 支付失败后的回调函数
              showToast('支付失败');
              that.$emit('close')
              console.log(res);
            }
          });
        });
  
        wx.error(function(res) {
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看
          console.error('微信JS-SDK配置失败:', res);
        });
        
      })
    },
  }
};
</script>

<style>

</style>